<template>
<div>
  <el-card>
    <div class="showRow">
 <div class="hesuan">
 <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
 <div>今日小区核酸情况</div>
    </div>
    <div class="weather">
      <div class="mainmsg"><span>{{weather.address}}</span> <span>{{weather.reportTime}}</span> </div>
      <div class="title">
         <span class="temp">{{weather.temp}}</span> 
         <span>{{weather.weather}}</span>
      </div>
      <div class="content">
        <div class="citem">
          <span>风向</span>
        <span class="dec">{{weather.windDirection}}</span>
        </div>
        <div class="citem">
          <span>湿度</span>
          <span class="dec">{{weather.humidity}}</span>
          </div>
        <div class="citem">
          <span>{{weather.windDirection}}风</span>
          <span class="dec"> {{weather.windPower}}</span>
         </div>
      </div>
    </div>
    <div class="date">
      <div class="dateLeft">
        <div class="nowweek">周{{singleDate.weekDay==1?'一':singleDate.weekDay==2?"二":singleDate.weekDay==3?"三":singleDate.weekDay==4?"四":singleDate.weekDay==5?"五":singleDate.weekDay==6?"六":"七"}}</div>
        <span class="day">{{(singleDate.date||'').split("-")[2]}}</span>
        <div class="yearMouth">{{(singleDate.date||'').split("-")[0]}}年{{(singleDate.date||'').split("-")[1]}}月</div>
        <div class="lunarCalendar">{{singleDate.lunarCalendar}}</div>
      </div>
      <div class="dateRight">
        <div class="week">
          <span>一</span>
          <span v-for="item in weekDay1" :key="item.date" :style="{'color':item.color}">{{item.day}}</span>
        </div>
        <div class="week">
          <span>二</span>
          <span v-for="item in weekDay2" :key="item.date" :style="{'color':item.color}">{{item.day}}</span>
        </div>
        <div class="week">
          <span>三</span>
          <span v-for="item in weekDay3" :key="item.date" :style="{'color':item.color}">{{item.day}}</span>
        </div>
        <div class="week">
          <span>四</span>
          <span v-for="item in weekDay4" :key="item.date" :style="{'color':item.color}">{{item.day}}</span>
        </div>
        <div class="week">
          <span>五</span>
          <span v-for="item in weekDay5" :key="item.date" :style="{'color':item.color}">{{item.day}}</span>
        </div>
        <div class="week">
          <span>六</span>
          <span v-for="item in weekDay6" :key="item.date" :style="{'color':item.color}">{{item.day}}</span>
        </div>
        <div class="week">
          <span>七</span>
          <span v-for="item in weekDay7" :key="item.date" :style="{'color':item.color}">{{item.day}}</span>
        </div>
      </div>
    </div>
    </div>
    <div class="menuListTitle">菜单功能</div>
   <div class="menu">
      <div class="menuList">
      <div class="menuItem">数据导出</div>
      <div class="menuItem">人员名单</div>
      <div class="menuItem"> 车牌号登记</div>
      <div class="menuItem"> 物业名单</div> 
      </div>
    <div class="menuechat" ref="main" style="width:400px;height:30vh;" ></div>  
    <div class="menuRight">
         <div class="menuRightItem">
           <div class="itemApp">
             <div class="appTitle">距离发工资还有</div>
             <div class="appTime">{{parseInt((mouthday||'').split("-")[2])- parseInt((singleDate.date||'').split("-")[2])}}天</div>
           </div>
       <div class="itemApp">
             <div class="appTitle">距离下班还有</div>
             <div class="appTime">{{offWorkTime}}</div>
           </div>
         </div>
          <div class="menuRightItem">
             <span>【摸鱼办】提醒您：</span>
    <span>{{(singleDate.date||'').split("-")[1]}}月{{(singleDate.date||'').split("-")[2]}}日{{new Date().getHours()>18?"晚上":new Date().getHours()>12?"中午":"早上"}}好，摸鱼人！今天也不要忘记摸鱼！</span>
          <span>您有一份摸鱼办文件请注意查收</span>
          </div>
    </div>
   </div>


  </el-card>
</div>
</template>

<script>

export default {
   data() {
      return {
       percentage:80,
       colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        interfaceip:'app_id=fhrikiiaqk9postr&app_secret=dGcrVGFlZ25na2xSbHVDcnpHMGNRZz09',
        city:'福州',
        weather:{},
        time:(new Date().getFullYear())+''+((new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1)),
        weekDay1:[],
        weekDay2:[],
        weekDay3:[],
        weekDay4:[],
        weekDay5:[],
        weekDay6:[],
        weekDay7:[],
        date:'',
        time2:"",
        mouthday:0,
        singleDate:{},
        offWorkTime:"02:22:33"
      }
    },
    created() {
       this.openFullScreen2()
      this.getCity()
       this.getWeather()
       this.getCalendar()
       this.getdateSingle()
       this.getOffWorkTime()

    },
    mounted() {
      this.createEcharts()
    },
    methods: {
      createEcharts(){
         var myEcharts =this.$echats.init(this.$refs.main)
         var option={
  title: {
    text: '小区人数统计',
    subtext: '丽春苑',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '楼栋',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'A21' },
        { value: 735, name: 'B31' },
        { value: 580, name: 'C41' },
        { value: 484, name: 'D51' },
        { value: 300, name: 'E61' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
         myEcharts.setOption(option);
      },
       getOffWorkTime(){
         setInterval( ()=> {
                    let offDate= Date.parse(new Date(`${this.singleDate.date} 18:00:00`)) 
         let nowDate =Date.parse(new Date())
         let offtimes =parseInt(offDate) -parseInt(nowDate) 
      
         let hour =parseInt(offtimes/60/60/1000%24)
         let minu =parseInt(offtimes/1000/60%60)
         let second =parseInt(offtimes/1000%60)
         let endTime =(hour<10?"0"+hour:hour)+":"+(minu<10?"0"+minu:minu)+":"+(second<10?"0"+second:second)
         this.offWorkTime= offtimes<0?"休息啦":endTime
         },1000)
       },
      async getWeather(){
        console.log(this.city)
        const {data:res}= await this.$http.get(`https://www.mxnzp.com/api/weather/current/${this.city}?${this.interfaceip}`)
        this.weather=res.data
        console.log(this.weather.address.split(" ")[1])
        this.weather.address=this.weather.address.split(" ")[1]
      },
      async getdateSingle(){
           let date =new Date()
           let mouth=(date.getMonth()+1)<10?"0"+(date.getMonth()+1):(date.getMonth()+1)
           let day =date.getDate()<10?"0"+date.getDate():date.getDate()
           this.time2=date.getFullYear()+''+mouth+''+day
           console.log(this.time2)
           const {data:res} =await this.$http.get(`https://www.mxnzp.com/api/holiday/single/${this.time2}?${this.interfaceip}`)
          console.log(res)
          this.singleDate=res.data
     },
      async getCity(){
        const {data:res} =await this.$http.get(`https://www.mxnzp.com/api/ip/self?${this.interfaceip}`)
        this.city =res.data.city.substring(0,res.data.city.length-1)
      },
      async getCalendar(){
        const {data:res} =await this.$http.get(`https://www.mxnzp.com/api/holiday/list/month/${this.time}?${this.interfaceip}`)
        this.mouthday =res.data[res.data.length-1].date
        switch(res.data[0].weekDay){
          case 1:
            this.weekDay1.push({date:res.data[0].date,day:res.data[0].date.split("-")[2],color:"#333"})
            break;
          case 2:
            this.weekDay2.push({date:res.data[0].date,day:res.data[0].date.split("-")[2],color:"#333"})
            this.weekDay1.push({date:this.getlastMouthDate(res.data[0].date,0),day:this.getlastMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
            break;
          case 3:
            this.weekDay3.push({date:res.data[0].date,day:res.data[0].date.split("-")[2],color:"#333"})
            this.weekDay1.push({date:this.getlastMouthDate(res.data[0].date,1),day:this.getlastMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
            this.weekDay2.push({date:this.getlastMouthDate(res.data[0].date,0),day:this.getlastMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
            break;
          case 4:
            this.weekDay4.push({date:res.data[0].date,day:res.data[0].date.split("-")[2],color:"#333"})
            this.weekDay1.push({date:this.getlastMouthDate(res.data[0].date,2),day:this.getlastMouthDate(res.data[0].date,2).split("-")[2],color:"#ddd"})
            this.weekDay2.push({date:this.getlastMouthDate(res.data[0].date,1),day:this.getlastMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
            this.weekDay3.push({date:this.getlastMouthDate(res.data[0].date,0),day:this.getlastMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
            break;
          case 5:
            this.weekDay5.push({date:res.data[0].date,day:res.data[0].date.split("-")[2],color:"#333"})
             this.weekDay1.push({date:this.getlastMouthDate(res.data[0].date,3),day:this.getlastMouthDate(res.data[0].date,3).split("-")[2],color:"#ddd"})
            this.weekDay2.push({date:this.getlastMouthDate(res.data[0].date,2),day:this.getlastMouthDate(res.data[0].date,2).split("-")[2],color:"#ddd"})
            this.weekDay3.push({date:this.getlastMouthDate(res.data[0].date,1),day:this.getlastMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
            this.weekDay4.push({date:this.getlastMouthDate(res.data[0].date,0),day:this.getlastMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
            break;
          case 6:
            this.weekDay6.push({date:res.data[0].date,day:res.data[0].date.split("-")[2],color:"#333"})
             this.weekDay1.push({date:this.getlastMouthDate(res.data[0].date,4),day:this.getlastMouthDate(res.data[0].date,4).split("-")[2],color:"#ddd"})
            this.weekDay2.push({date:this.getlastMouthDate(res.data[0].date,3),day:this.getlastMouthDate(res.data[0].date,3).split("-")[2],color:"#ddd"})
            this.weekDay3.push({date:this.getlastMouthDate(res.data[0].date,2),day:this.getlastMouthDate(res.data[0].date,2).split("-")[2],color:"#ddd"})
            this.weekDay4.push({date:this.getlastMouthDate(res.data[0].date,1),day:this.getlastMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
            this.weekDay5.push({date:this.getlastMouthDate(res.data[0].date,0),day:this.getlastMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
            break;
          default:
            this.weekDay7.push({date:res.data[0].date,day:res.data[0].date.split("-")[2],color:"#333"})
            this.weekDay1.push({date:this.getlastMouthDate(res.data[0].date,5),day:this.getlastMouthDate(res.data[0].date,5).split("-")[2],color:"#ddd"})
            this.weekDay2.push({date:this.getlastMouthDate(res.data[0].date,4),day:this.getlastMouthDate(res.data[0].date,4).split("-")[2],color:"#ddd"})
            this.weekDay3.push({date:this.getlastMouthDate(res.data[0].date,3),day:this.getlastMouthDate(res.data[0].date,3).split("-")[2],color:"#ddd"})
            this.weekDay4.push({date:this.getlastMouthDate(res.data[0].date,2),day:this.getlastMouthDate(res.data[0].date,2).split("-")[2],color:"#ddd"})
            this.weekDay5.push({date:this.getlastMouthDate(res.data[0].date,1),day:this.getlastMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
            this.weekDay6.push({date:this.getlastMouthDate(res.data[0].date,0),day:this.getlastMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
            break;  
        }
        res.data.forEach((item,index)=>{
          if (index!=0) {
            switch (item.weekDay) {
           case 1:
              this.weekDay1.push({date:item.date,day:item.date.split("-")[2],color:'#333'})
              break;
            case 2:
              this.weekDay2.push({date:item.date,day:item.date.split("-")[2],color:'#333'})
              break;
            case 3:
              this.weekDay3.push({date:item.date,day:item.date.split("-")[2],color:'#333'})
              break;
            case 4:
              this.weekDay4.push({date:item.date,day:item.date.split("-")[2],color:'#333'})
              break;
            case 5:
              this.weekDay5.push({date:item.date,day:item.date.split("-")[2],color:'#333'})
              break;
            case 6:
             this.weekDay6.push({date:item.date,day:item.date.split("-")[2],color:'#333'})
             break;
           default:
             this.weekDay7.push({date:item.date,day:item.date.split("-")[2],color:'#333'})
             break;
         }
          }
        
        })
        switch (res.data[res.data.length-1].weekDay) {
          case 1:
             this.weekDay2.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,0),day:this.getNextMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
             this.weekDay3.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,1),day:this.getNextMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
             this.weekDay4.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,2),day:this.getNextMouthDate(res.data[0].date,2).split("-")[2],color:"#ddd"})
             this.weekDay5.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,3),day:this.getNextMouthDate(res.data[0].date,3).split("-")[2],color:"#ddd"})
             this.weekDay6.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,4),day:this.getNextMouthDate(res.data[0].date,4).split("-")[2],color:"#ddd"})
             this.weekDay7.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,5),day:this.getNextMouthDate(res.data[0].date,5).split("-")[2],color:"#ddd"})
            break;
          case 2:
             this.weekDay3.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,0),day:this.getNextMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
             this.weekDay4.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,1),day:this.getNextMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
             this.weekDay5.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,2),day:this.getNextMouthDate(res.data[0].date,2).split("-")[2],color:"#ddd"})
             this.weekDay6.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,3),day:this.getNextMouthDate(res.data[0].date,3).split("-")[2],color:"#ddd"})
             this.weekDay7.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,4),day:this.getNextMouthDate(res.data[0].date,4).split("-")[2],color:"#ddd"})
           break;
          case 3:
            this.weekDay4.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,0),day:this.getNextMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
             this.weekDay5.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,1),day:this.getNextMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
             this.weekDay6.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,2),day:this.getNextMouthDate(res.data[0].date,2).split("-")[2],color:"#ddd"})
             this.weekDay7.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,3),day:this.getNextMouthDate(res.data[0].date,3).split("-")[2],color:"#ddd"})
           break;
          case 4:
           
             this.weekDay5.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,0),day:this.getNextMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
             this.weekDay6.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,1),day:this.getNextMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
             this.weekDay7.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,2),day:this.getNextMouthDate(res.data[0].date,2).split("-")[2],color:"#ddd"})
           break;
          case 5:
             this.weekDay6.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,0),day:this.getNextMouthDate(res.data[0].date,0).split("-")[2],color:"#ddd"})
             this.weekDay7.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,1),day:this.getNextMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
           break;
          case 6:
             this.weekDay7.push({date:this.getNextMouthDate(res.data[res.data.length-1].date,0),day:this.getNextMouthDate(res.data[0].date,1).split("-")[2],color:"#ddd"})
           break;
          default:
            break;
        }
        console.log(this.weekDay1)
        let datemodel=new Date()
        let year=datemodel.getFullYear()
        let month=(datemodel.getMonth()+1)<10?"0"+(datemodel.getMonth()+1):(datemodel.getMonth()+1)
        let date =datemodel.getDate()<10?"0"+datemodel.getDate():datemodel.getDate()
        this.date =year+"-"+month+"-"+date
        console.log(this.date)
        this.weekDay1.forEach(item=>{
          if (item.date==this.date) {
             item.color="#ff0000"
          }
        })
        this.weekDay2.forEach(item=>{
          if (item.date==this.date) {
             item.color="#ff0000"
          }
        })
        this.weekDay3.forEach(item=>{
          if (item.date==this.date) {
             item.color="#ff0000"
          }
        })
        this.weekDay4.forEach(item=>{
          if (item.date==this.date) {
             item.color="#ff0000"
          }
        })
        this.weekDay5.forEach(item=>{
          if (item.date==this.date) {
             item.color="#ff0000"
          }
        })
        this.weekDay6.forEach(item=>{
          if (item.date==this.date) {
             item.color="#ff0000"
          }
        })
        this.weekDay7.forEach(item=>{
          if (item.date==this.date) {
             item.color="#ff0000"
          }
        })
      },
      getlastMouthDate(date,day){
         let datelist= date.split("-")
         datelist[1]=parseInt(datelist[1])-1
         datelist[1] =datelist[1]<1?"12":datelist[1]>10?datelist[1]+"":"0"+datelist[1]
         datelist[2]=(parseInt(datelist[1])==4||parseInt(datelist[1])==6||parseInt(datelist[1])==9
         ||parseInt(datelist[1])==11?30:parseInt(datelist[1])==2?28:31)
         datelist[2]=(datelist[2]-day)+""
         return datelist.join("-")
      },
      getNextMouthDate(date,day){
    let datelist= date.split("-")
         datelist[1]=parseInt(datelist[1])+1
         datelist[1] =datelist[1]>12?"01":datelist[1]>10?datelist[1]+"":"0"+datelist[1]
         
         datelist[2]="0"+(1+day)
         return datelist.join("-")
      },
       // 加载
      openFullScreen2() {
        const loading = this.$loading.service({
          lock: true,
          text: '拼命加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },
      
    },
  
}
</script>

<style scoped>
.showRow{
  padding: 0 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weather{
  width: 25vw;
  background: url(../../../public/image/weather.jpg);
  background-size: cover;
  height: 20vh;
  color: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mainmsg{
  display: flex;
  justify-content: space-between;
  width: 90%;
}
.mainmsg span:first-child{
  font-size: 18px;
}
.mainmsg span:nth-child(2){
  font-size: 10px;
}
.title{
  display: flex;
  flex-direction: column;
}
.temp{
  font-size: 20px;
}
.content{
  margin-top: 10px;
  width: 70%;
  display: flex;
  justify-content: space-between;
  background: #ddd;
  opacity: .8;
  border-radius: 10px;
}
.citem{
  color: black;
  display: flex;
  flex-direction: column;
  padding:5px 10px ;
}
.citem span:first-child{
  font-weight: 600;
}
.citem .dec{
  font-size: 12px;
}
.date{
  display: flex;
  width: 25vw;
  height: 20vh;
  background: yellow;
  border-radius: 20px;
  justify-content: space-around;
  align-items: center;
}
.dateRight{
  display: flex;
  
}
.week{
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  font-size: 14px;
  font-family: "STCaiyun";
}
.dateLeft{
  font-size: 12px;
}
.dateLeft .nowweek{
  font-size: 15px;
  color: red;
  
}
.dateLeft .day{
 padding: 20px 0;
  font-size: 28px;
}
.week span{
  padding: 2px 0;
}
.menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 0 2vw;
}
.menu .menuList{
  position: relative;
  display: flex;

  flex-direction: column;
}
.menu .menuList .menuItem{
  position: relative;
  font-size: 18px;
  background: palegreen;
  border-radius: 10px;
  padding: 10px 30px;
  margin: 10px 0;
  text-align: center;
  transition: all 0.5s;
  width: 10vw;
}
.menu .menuList .menuItem:hover{
    top: -10px;
}
.menuListTitle{
  font-size: 20px;
}
.menuListTitle{
  margin-top: 10px;
}
.menuRight{
  width: 20vw;
  height: 30vh;
  margin-right: 3vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menuRightItem{
  width: 90%;
  height: 45%;
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.menuRightItem:first-child{
  flex-direction: row;
  justify-content: space-between;
}
.menuRightItem:first-child .itemApp{
  width: 45%;
  height: 100%;
 border:1px solid orange;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.menuRightItem:first-child .itemApp .appTitle{
  width: 7.1vw;
  height: 20%;
  background: orange;
  color: white;
  padding: 10px 1vw ;
 
  text-align: center;
}
.menuRightItem:first-child .itemApp:nth-child(2){
  border: 1px solid green;
  margin-right: 2px;
}
.menuRightItem:first-child .itemApp:nth-child(2) .appTitle {
   background: green;

}

 .menuRightItem:first-child  .appTime{
    color: orange;
    width: 100%;
    height: 70%;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .menuRightItem:first-child .itemApp:nth-child(2) .appTime {
  color: white;
  background: green;
  font-size: 20px;

}
.menuRightItem:nth-child(2){
  background: none;
  border: 1px solid;
  justify-content: center;
  border-radius: 10px;
}
.menuRightItem:nth-child(2) span:nth-child(3){
  color: burlywood;
}
</style>